<template>
	<view class="login">
		<view class="bg-login ">
		</view>
		<view class="login_area">
			<form>
				<view class="cu-form-group margin-top-xl">
					<input placeholder="请输入账号" v-model="username" name="input"></input>
					<text class='cuIcon-peoplefill text-orange'></text>
				</view>
				<view class="cu-form-group margin-top">
					<input placeholder="请输入密码" v-model="password" type="password" name="input"></input>
					<text class='cuIcon-newsfill text-orange'></text>
				</view>
			</form>
			<view class="padding flex flex-direction">
				<button class="cu-btn round bg-blue margin-tb-sm lg" @click="login">登录</button>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="update" v-if="didUpdate">
			<view class="up_detail">
				<view class="update_top">
					
				</view>
				<view class="update_bottom">
					<h3 class="margin-left">{{version}}新版本特性</h3>
					<text class="margin-left margin-top-xs" style="display: block;" v-for="item in describe">{{item}}</text>
					<view class="padding flex flex-direction" >
						<button class="cu-btn bg-yellow text-white margin-tb-sm" @click="goUpdate">立即更新</button>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default{
		data() {
			return {
				username: '',
				password:'',
				version:'',
				url:'',
				describe:'',
				didUpdate:false
			}
		},
		onLoad() {
			//#ifdef APP-PLUS
			this.doesUpdate()
			//#endif
			this.veryfyLogin()
		},
		methods:{
			//#ifdef APP-PLUS
			doesUpdate(){
				var server = "http://peixun.gaojer.com:8880/app/version/"; //检查更新地址
				var req = { //升级检测数据  
					"version": plus.runtime.version  
				};  
				uni.request({  
					url: server,  
					data: req,  
					success: (res) => {
						if (res.statusCode == 200 && res.data.status === 1) {  
							  this.version = res.data.version
							  this.describe = res.data.notes.split(" ")
							  this.didUpdate = true
							  this.url = res.data.url
						} 
					}  
				})  
			},
			goUpdate(){
				plus.runtime.openURL(this.url);
			},
			//#endif
			veryfyLogin(){
				if(uni.getStorageSync('sessionId')){
					uni.switchTab({
					    url: '/pages/homepage/homepage'
					});
				}
			},
			login(){
				let username = this.username
				let password = this.password
				uni.request({
					url:'http://peixun.gaojer.com:9876/trains/login/',
					method:'POST',
					header:{
					  "content-type": 'application/x-www-form-urlencoded',
					},
					data:{username:username,password:password},
					success: (res) => {
						if(res.statusCode==400){
							uni.showToast({
								title:'用户名或密码错误',
								icon:'loading'
							})
							return
						}
						uni.setStorageSync('sessionId', `${res.data.token}`);
						uni.switchTab({
						    url: '/pages/homepage/homepage'
						});
					},
					fail: (err) => {
						uni.showToast({
							title:'用户名或密码错误',
							icon:'loading'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.login{
	width: 100%;
	height: 100vh;
	background: white;
	.bg-login{
		width: 100%;
		height: 530rpx;
		padding-top: 30rpx;
		background: url(../../static/img/login_bg5.jpg);
		background-size: 100% 100%;
		position: relative;
	}
	.cu-form-group{
		border: 1px solid gainsboro;
		border-radius: 18px;
	}
	.login_area{
		padding: 30rpx 100rpx 0 100rpx;
		margin-top: 30rpx;
	}
	.denglu{
		padding: 26rpx;
		background: #0081F0;
		font-size: 42rpx;
		color: white;
		letter-spacing: 14rpx;
		border-radius: 42rpx;
		position:absolute;
		left:50%;
		margin-left: -82rpx;
		bottom: -40rpx;
	}
	.update{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		.up_detail{
			position: fixed;
			width: 500rpx;
			height: 695rpx;
			margin:auto;
			top:0;
			bottom:0;
			left:0;
			right:0;
			border: 2rpx solid grey;
			border-radius: 10rpx;
		}
		.update_top{
			height: 340rpx;
			background: url(../../static/img/update_bg.png) no-repeat;
			background-size: 100% 100%;
		}
		.update_bottom{
			height: 350rpx;
			background: white;
		}
	}
}
</style>
